<script setup lang="ts">
import { ref, defineEmits, toRaw, computed, onMounted } from "vue";
import {
  getCurrentUser,
  getEquipmentDataVOByUserId,
  listPaymentBillVOByPage,
  updateMyUser,
  pay,
  getRecentBill,
  userLogout,
} from "@/api/user";
import { message } from "ant-design-vue";
import type { DescriptionsProps } from "ant-design-vue";
import {
  UploadOutlined,
  WaterOutlined,
  ThunderboltOutlined,
  ExclamationCircleOutlined,
  HistoryOutlined,
  FileTextOutlined,
  UserOutlined,
  DollarOutlined,
  QuestionCircleOutlined,
  NotificationOutlined,
} from "@ant-design/icons-vue";
import type { UploadProps, UploadChangeParam } from "ant-design-vue";
import dayjs from "dayjs";
import router from "@/router";
import AIChatComponent from "@/components/AIChatComponent.vue";
import {
  SystemNotification,
  SystemNotificationQueryRequest,
} from "@/models/systemNotification";
import { listSystemNotificationByPage } from "@/api/systemNotification";
import TeacherConsultComponent from "@/components/TeacherConsultComponent.vue";
import BalanceAlarmRecordManagement from "@/components/BalanceAlarmRecordManagement.vue";
import BalanceAlarmUserRecardManager from "@/components/BalanceAlarmUserRecoardManager.vue";
import { getBalanceAlarmCountByDormitoryId } from "@/api/balanceAlarm";
import BillHistoryComponent from "@/components/BillHistoryComponent.vue";
import BalanceAlarmUserRecoardManager from "@/components/BalanceAlarmUserRecoardManager.vue";
const fileList = ref<UploadProps["fileList"]>([]);
const size = ref<DescriptionsProps["size"]>("default");
const onChange = (e: any) => {
  console.log("size checked", e.target.value);
  size.value = e.target.value;
};
const countAlarm = ref(0);
const countBalanceAlarmCountByDormitoryId = async () => {
  const res = await getBalanceAlarmCountByDormitoryId(
    userInfo.value.dormitoryId
  );
  console.log("countAlarm " + res.data.data);
  if (res.data.code == 0) {
    countAlarm.value = res.data.data;
  }
};
// 模拟用户信息
const userInfo = ref({
  id: "1879338355388731393",
  userName: "曹跃跃",
  userAccount: "yupi",
  userPassword: "bfd8fd19b540e01a6aac5db69973d98a",
  userAvatar:
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.qmIh5R-d_DmDKOYgzN09agHaJQ?rs=1&pid=ImgDetMain",
  userProfile: "第五人格玩家",
  userRole: "user",
  dormitoryId: 1,
  dormitoryVO: {
    dormitoryId: 1,
    dormitoryName: "201",
    buildingId: 1,
    createTime: "2025-01-15T07:52:49.000+00:00",
    updateTime: "2025-01-15T07:52:49.000+00:00",
    building: {
      buildingId: 1,
      buildingName: "Mo Lu",
      address: "941 Diplomacy Drive",
      createTime: "2006-05-10T23:25:44.000+00:00",
      updateTime: "2022-01-05T09:42:19.000+00:00",
    },
  },
});
const editForm = ref({
  id: "",
  userName: "",
  userAccount: "",
  userPassword: "",
  userAvatar: "",
  userProfile: "",
});
const getUserInfo = async () => {
  const res = await getCurrentUser();
  userInfo.value = res.data.data;
  initEditForm();
  await countBalanceAlarmCountByDormitoryId();
};
getUserInfo();
// 编辑状态控制
const isEditing = ref(false);
//图片按钮
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (info.file.status == "done") {
    console.log("infochange");
    console.log(info.fileList[0].response.data);
    editForm.value.userAvatar = info.fileList[0].response.data;
    console.log("editForm.value.userAvatar" + editForm.value.userAvatar);
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};
// 保存编辑
const handleSave = async () => {
  try {
    if (!editForm.value.userName) {
      message.error("请填写完整信息");
      return;
    }
    const rawEditForm = toRaw(editForm.value);
    if (!rawEditForm.userPassword) {
      delete rawEditForm.userPassword;
    }
    const res = await updateMyUser(rawEditForm);
    if (res.data.code == 0 && res.data.data) {
      await getUserInfo();
      isEditing.value = false;
      message.success("个人信息更新成功！");
    } else {
      message.error("更新失败");
    }
  } catch (error) {
    message.error("更新失败");
  }
};

// 取消编辑
const handleCancel = () => {
  initEditForm();
  isEditing.value = false;
};

// 初始化编辑表单
const initEditForm = () => {
  editForm.value = {
    ...userInfo.value,
    userPassword: "",
  };
};

// 模拟水电费数据
const utilityBills = ref({
  equipmentId: 1,
  readValue: 1,
  currentReadValue: 68,
  totalCost: 403,
  equipmentBalance: 12,
});
//获取水电费数据
const getUtilityBills = async () => {
  const res = await getEquipmentDataVOByUserId();
  if (res.data.code == 0 && res.data.data) {
    utilityBills.value = res.data.data;
    console.log("初始化水电费成功");
  }
};
//格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    "0"
  )}-${String(date.getDate()).padStart(2, "0")}`;
};
getUtilityBills();
// 模拟历史缴费记录
const paymentHistory = ref([
  {
    paymentId: 11,
    dormitoryId: 1,
    userId: "2",
    billId: 227,
    paymentDate: "2008-03-31T16:00:00.000+00:00",
    paymentAmount: 273.32,
    paymentMethod: "Credit Card",
    paymentPurpose: "5WvvtFoA4T",
    createTime: "2004-05-25T18:37:42.000+00:00",
    updateTime: "2025-01-20T02:48:07.000+00:00",
    userVO: {
      id: "2",
      userName: "曹跃跃",
      userAccount: "yupi",
      userPassword: "bfd8fd19b540e01a6aac5db69973d98a",
      userAvatar:
        "http://117.72.66.230:9000/cyy/20250120/0a08b59355114b09865dad678873ce66..gif",
      userProfile: "第五人格玩家",
      userRole: "user",
      dormitoryVO: null,
      createTime: "2025-01-15T01:22:35.000+00:00",
    },
  },
]);
// 模拟分页
interface Pagination {
  current: number;
  pageSize: number;
  total: number;
  showSizeChanger: boolean;
  showQuickJumper: boolean;
  onChange: (page: number, pageSize: number) => void;
}
const pagination = ref<Pagination>({
  current: 1,
  pageSize: 6,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  onChange: (page: number, pageSize: number) => {
    pagination.value.current = page;
    pagination.value.pageSize = pageSize;
  },
});
const getPaymentHistory = async () => {
  try {
    let paymentBillQueryRequest = { dormitoryId: userInfo.value.dormitoryId };
    const res = await listPaymentBillVOByPage(paymentBillQueryRequest);
    if (res.data.code == 0 && res.data.data) {
      paymentHistory.value = res.data.data.records;
      pagination.value.total = res.data.data.records.length;
      console.log("更新历史缴费记录成功");
    }
  } catch (error) {
    console.error("获取历史缴费记录失败:", error);
    message.error("获取历史缴费记录失败");
  }
};

getPaymentHistory();

const paginatedRecords = computed(() => {
  const start = (pagination.value.current - 1) * pagination.value.pageSize;
  const end = start + pagination.value.pageSize;
  return paymentHistory.value.slice(start, end).map((record) => ({
    ...record,
    createTime: formatDate(record.createTime),
  }));
});
// 模拟最近通知
const notifications = ref<SystemNotification[]>([]);
// 模拟从后端获取的消息数据
const messages = ref<SystemNotification[]>([]);

//后端获取最近5条数据
const fetchMessages = async () => {
  try {
    const queryRequest: SystemNotificationQueryRequest = {
      current: 1,
      pageSize: 5,
    };
    const res = await listSystemNotificationByPage(queryRequest);
    if (res.data.code === 0) {
      messages.value = res.data.data.records;
    } else {
      message.error("获取数据失败");
    }
  } catch (error) {
    message.error("获取数据失败");
  }
};
fetchMessages();

const selectedKeys = ref(["1"]);
const openKeys = ref(["sub1"]);

const emit = defineEmits(["logout"]);

const handleLogout = async () => {
  try {
    const res = await userLogout();
    if (res.data.code === 0) {
      message.success("退出登录成功");
      // 清除本地存储的用户信息（如果有的话）
      localStorage.removeItem("userInfo");
      // 跳转到登录页
      await router.push("/");
    } else {
      message.error(res.data.message || "退出失败");
    }
  } catch (error) {
    message.error("退出失败");
  }
};

// 添加充值相关的状态
const rechargeVisible = ref<boolean>(false);
const rechargeAmount = ref<number>(0);
const rechargeType = ref<"water" | "electricity">("water");

// 处理充值
const handleRecharge = async () => {
  try {
    if (!rechargeAmount.value || rechargeAmount.value <= 0) {
      message.error("请输入有效的充值金额");
      return;
    }

    const equipmentId =
      rechargeType.value === "water"
        ? utilityBills.value[0].equipmentId
        : utilityBills.value[1].equipmentId;

    const res = await pay(rechargeAmount.value, equipmentId);

    if (res.data.code === 0) {
      message.success(
        `${rechargeType.value === "water" ? "水费" : "电费"}充值成功！`
      );
      rechargeVisible.value = false;
      rechargeAmount.value = 0;
      // 刷新水电费数据
      await getUtilityBills();
    } else {
      message.error(res.data.message || "充值失败，请重试");
    }
  } catch (error) {
    console.error("充值错误:", error);
    message.error("充值失败，请重试");
  }
};

// 添加历史账单数据
const billHistory = ref([]);

// 获取历史账单数据
const getBillHistory = async () => {
  try {
    const res = await getRecentBill();
    if (res.data.code === 0 && res.data.data) {
      billHistory.value = res.data.data;
      console.log("获取历史账单成功");
    }
  } catch (error) {
    console.error("获取历史账单失败:", error);
    message.error("获取历史账单失败");
  }
};

// 添加余额报警相关的状态和方法
const isBalanceAlarmVisible = ref(false);

const showBalanceAlarm = () => {
  isBalanceAlarmVisible.value = true;
};

const handleBalanceAlarmCancel = () => {
  isBalanceAlarmVisible.value = false;
};
</script>

<template>
  <a-layout class="layout">
    <!-- 顶部导航栏 -->
    <a-layout-header class="header">
      <div class="logo">水电管理系统</div>
      <div>
        <a-space :size="24">
          <a-dropdown>
            <a-badge :count="countAlarm">
              <a-avatar
                shape="square"
                v-if="userInfo.userAvatar"
                :src="userInfo.userAvatar"
                class="avatar-hover"
              />
            </a-badge>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a-modal
                    v-model:visible="isBalanceAlarmVisible"
                    title="余额报警记录"
                    width="800px"
                    @cancel="handleBalanceAlarmCancel"
                  >
                    <balance-alarm-user-recard-manager />
                  </a-modal>
                  <span @click="showBalanceAlarm">查看余额报警</span>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <a-button type="link" @click="handleLogout">退出登录</a-button>
        </a-space>
      </div>
    </a-layout-header>

    <a-layout>
      <!-- 侧边菜单 -->
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-menu-item key="1" @click="getUserInfo">
            <template #icon>
              <user-outlined />
            </template>
            个人信息管理
          </a-menu-item>

          <a-sub-menu key="sub1">
            <template #title>
              <span>
                <dollar-outlined />
                <span>水电费管理</span>
              </span>
            </template>
            <a-menu-item key="2" @click="getUtilityBills">水费</a-menu-item>
            <a-menu-item key="3" @click="getUtilityBills">电费</a-menu-item>
            <a-menu-item key="4" @click="getPaymentHistory"
              >历史缴费</a-menu-item
            >
            <a-menu-item key="8" @click="getBillHistory">历史账单</a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub2">
            <template #title>
              <span>
                <question-circle-outlined />
                <span>业务咨询</span>
              </span>
            </template>
            <a-menu-item key="5">AI咨询</a-menu-item>
            <a-menu-item key="6">老师咨询</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <template #title>
              <span>
                <notification-outlined />
                <span>最近通知</span>
              </span>
            </template>
            <a-menu-item key="9"> 余额报警通知 </a-menu-item>
            <a-menu-item key="7"> 系统通知 </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>

      <!-- 主要内容区域 -->
      <a-layout-content class="content">
        <a-card v-if="selectedKeys.includes('1')" title="个人信息">
          <template #extra>
            <a-space>
              <a-button
                v-if="!isEditing"
                type="primary"
                @click="isEditing = true"
              >
                编辑信息
              </a-button>
              <template v-else>
                <a-button type="primary" @click="handleSave">保存</a-button>
                <a-button @click="handleCancel">取消</a-button>
              </template>
            </a-space>
          </template>
          <a-radio-group v-model:value="size" @change="onChange">
            <a-radio value="default">默认</a-radio>
            <a-radio value="middle">中</a-radio>
            <a-radio value="small">小</a-radio>
          </a-radio-group>
          <br />
          <br />
          <div v-if="!isEditing">
            <a-descriptions bordered :size="size">
              <a-descriptions-item label="头像" :span="3">
                <a-image v-if="userInfo.userAvatar" :src="userInfo.userAvatar"
                :width="100" height: auto;/>
              </a-descriptions-item>
              <a-descriptions-item label="姓名">{{
                userInfo.userName
              }}</a-descriptions-item>
              <a-descriptions-item v-if="userInfo.dormitoryVO" label="宿舍号">{{
                userInfo.dormitoryVO.dormitoryName
              }}</a-descriptions-item>
              <a-descriptions-item label="角色">{{
                userInfo.userRole
              }}</a-descriptions-item>
              <a-descriptions-item label="账号">{{
                userInfo.userAccount
              }}</a-descriptions-item>
              <a-descriptions-item label="密码" :span="2">{{
                userInfo.userPassword
              }}</a-descriptions-item>
              <a-descriptions-item label="地址" :span="3">{{
                userInfo.dormitoryVO.building.address
              }}</a-descriptions-item>
              <a-descriptions-item label="简介" :span="3">{{
                userInfo.userProfile
              }}</a-descriptions-item>
            </a-descriptions>
          </div>
          <div v-else>
            <a-form :model="editForm" layout="vertical">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="用户名" required>
                    <a-input v-model:value="editForm.userName" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="账号" required>
                    <a-input v-model:value="editForm.userAccount" />
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="密码">
                    <a-input-password v-model:value="editForm.userPassword" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="简介">
                    <a-input v-model:value="editForm.userProfile" />
                  </a-form-item>
                </a-col>
              </a-row>

              <a-form-item label="头像">
                <a-upload
                  v-model:file-list="fileList"
                  action="http://117.72.66.230:8101/api/file/uploadNew"
                  list-type="picture"
                  @change="handleChange"
                >
                  <a-button>
                    <upload-outlined></upload-outlined>
                    上传头像
                  </a-button>
                </a-upload>
              </a-form-item>

              <a-row>
                <a-col :span="24" style="text-align: right">
                  <a-space>
                    <a-button @click="handleCancel">取消</a-button>
                    <a-button type="primary" @click="handleSave">保存</a-button>
                  </a-space>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-card>

        <a-card v-if="selectedKeys.includes('2')" class="utility-card">
          <div class="utility-header">
            <div class="utility-title">
              <WaterOutlined class="utility-icon" />
              <span>水费管理</span>
            </div>
            <a-button
              type="primary"
              size="large"
              @click="
                () => {
                  rechargeType = 'water';
                  rechargeVisible = true;
                }
              "
            >
              立即充值
            </a-button>
          </div>
          <div class="utility-content">
            <div class="utility-balance">
              <a-statistic
                title="当前余额"
                :value="utilityBills[0].equipmentBalance"
                :precision="2"
                prefix="￥"
                :valueStyle="{ color: '#3f8600', fontSize: '36px' }"
              />
              <div
                class="balance-tips"
                v-if="utilityBills[0].equipmentBalance < 50"
              >
                <ExclamationCircleOutlined style="color: #ff4d4f" />
                <span>余额不足，请及时充值</span>
              </div>
            </div>

            <a-row :gutter="24" class="utility-stats">
              <a-col :span="8">
                <a-card class="stat-card">
                  <template #title>
                    <span class="stat-title">上次读数</span>
                  </template>
                  <div class="stat-value">{{ utilityBills[0].readValue }}</div>
                  <div class="stat-label">立方米</div>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card class="stat-card">
                  <template #title>
                    <span class="stat-title">当前读数</span>
                  </template>
                  <div class="stat-value">
                    {{ utilityBills[0].currentReadValue }}
                  </div>
                  <div class="stat-label">立方米</div>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card class="stat-card">
                  <template #title>
                    <span class="stat-title">本月费用</span>
                  </template>
                  <div class="stat-value">¥{{ utilityBills[0].totalCost }}</div>
                  <div class="stat-label">元</div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-card>

        <a-card v-if="selectedKeys.includes('3')" class="utility-card">
          <div class="utility-header">
            <div class="utility-title">
              <ThunderboltOutlined class="utility-icon" />
              <span>电费管理</span>
            </div>
            <a-button
              type="primary"
              size="large"
              @click="
                () => {
                  rechargeType = 'electricity';
                  rechargeVisible = true;
                }
              "
            >
              立即充值
            </a-button>
          </div>

          <div class="utility-content">
            <div class="utility-balance">
              <a-statistic
                title="当前余额"
                :value="utilityBills[1].equipmentBalance"
                :precision="2"
                prefix="￥"
                :valueStyle="{ color: '#3f8600', fontSize: '36px' }"
              />
              <div
                class="balance-tips"
                v-if="utilityBills[1].equipmentBalance < 50"
              >
                <ExclamationCircleOutlined style="color: #ff4d4f" />
                <span>余额不足，请及时充值</span>
              </div>
            </div>

            <a-row :gutter="24" class="utility-stats">
              <a-col :span="8">
                <a-card class="stat-card">
                  <template #title>
                    <span class="stat-title">上次读数</span>
                  </template>
                  <div class="stat-value">{{ utilityBills[1].readValue }}</div>
                  <div class="stat-label">度</div>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card class="stat-card">
                  <template #title>
                    <span class="stat-title">当前读数</span>
                  </template>
                  <div class="stat-value">
                    {{ utilityBills[1].currentReadValue }}
                  </div>
                  <div class="stat-label">度</div>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card class="stat-card">
                  <template #title>
                    <span class="stat-title">本月费用</span>
                  </template>
                  <div class="stat-value">¥{{ utilityBills[1].totalCost }}</div>
                  <div class="stat-label">元</div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-card>

        <a-card v-if="selectedKeys.includes('4')" class="history-card">
          <template #title>
            <div class="card-title">
              <history-outlined />
              <span>历史缴费记录</span>
            </div>
          </template>
          <a-table
            :data-source="paginatedRecords"
            :pagination="pagination"
            :bordered="true"
            class="custom-table"
          >
            <a-table-column
              title="缴费用户"
              :data-index="['userVO', 'userName']"
              key="userName"
              align="center"
            >
              <template #headerCell>
                <span class="column-header">缴费用户</span>
              </template>
            </a-table-column>
            <a-table-column
              title="类型"
              data-index="paymentPurpose"
              key="paymentPurpose"
              align="center"
            >
              <template #headerCell>
                <span class="column-header">类型</span>
              </template>
            </a-table-column>
            <a-table-column
              title="缴费日期"
              data-index="createTime"
              key="createTime"
              align="center"
            >
              <template #headerCell>
                <span class="column-header">缴费日期</span>
              </template>
            </a-table-column>
            <a-table-column
              title="支付金额"
              data-index="paymentAmount"
              key="paymentAmount"
              :customRender="({ text }) => `¥${Number(text).toFixed(2)}`"
              align="right"
            >
              <template #headerCell>
                <span class="column-header">支付金额</span>
              </template>
            </a-table-column>
          </a-table>
        </a-card>

        <a-card v-if="selectedKeys.includes('5')">
          <AIChatComponent />
        </a-card>

        <a-card v-if="selectedKeys.includes('6')" title="老师咨询">
          <teacher-consult-component />
        </a-card>

        <a-card v-if="selectedKeys.includes('7')" title="最近通知">
          <a-list :dataSource="messages" :itemLayout="'horizontal'">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta
                  :title="item.title"
                  :description="item.content"
                >
                  <template #extra>
                    <span>{{ item.createTime }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>

        <!-- 添加充值对话框 -->
        <a-modal
          v-model:visible="rechargeVisible"
          :title="`${rechargeType === 'water' ? '水费' : '电费'}充值`"
          @ok="handleRecharge"
        >
          <a-form layout="vertical">
            <a-form-item label="充值金额">
              <a-input-number
                v-model:value="rechargeAmount"
                :min="0"
                :precision="2"
                style="width: 100%"
                addon-before="￥"
              />
            </a-form-item>
          </a-form>
        </a-modal>
        <!-- 余额预警 -->
        <balance-alarm-user-recoard-manager v-if="selectedKeys.includes('9')" />
        <!-- 修改历史账单卡片 -->
        <!-- ... 其他代码 ... -->
        <a-card v-if="selectedKeys.includes('8')" class="history-card">
          <bill-history-component />
        </a-card>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.layout {
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo {
  color: #000;
  font-size: 18px;
  font-weight: bold;
}

.content {
  padding: 24px;
  background: #f0f2f5;
  min-height: 280px;
}

.chat-container {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 10px;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
}

.message.user {
  background: #e6f7ff;
  margin-left: 20%;
}

.message.ai {
  background: #f5f5f5;
  margin-right: 20%;
}

.message-content {
  margin-bottom: 4px;
}

.message-time {
  font-size: 12px;
  color: #999;
  text-align: right;
}

.chat-input {
  padding: 10px 0;
}
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline [class*="-upload-list-rtl"] :deep(.ant-upload-list-item) {
  float: right;
}

.utility-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.utility-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.utility-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
}

.utility-icon {
  font-size: 24px;
  margin-right: 12px;
  color: #1890ff;
}

.utility-content {
  padding: 24px;
}

.utility-balance {
  margin-bottom: 32px;
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
}

.balance-tips {
  margin-top: 8px;
  color: #ff4d4f;
  font-size: 14px;
}

.balance-tips .anticon {
  margin-right: 8px;
}

.utility-stats {
  .stat-card {
    text-align: center;
    border-radius: 8px;

    .stat-title {
      font-size: 14px;
      color: #666;
    }

    .stat-value {
      font-size: 24px;
      font-weight: 500;
      color: #262626;
      margin: 8px 0;
    }

    .stat-label {
      font-size: 12px;
      color: #999;
    }
  }
}

.history-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.history-card :deep(.ant-card-head) {
  border-bottom: 2px solid #f0f0f0;
  padding: 0 24px;
  min-height: 64px;
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #1f1f1f;
}

.card-title .anticon {
  margin-right: 12px;
  font-size: 20px;
  color: #1890ff;
}

.custom-table {
  margin-top: 16px;
}

.custom-table :deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 500;
  padding: 16px 24px;
}

.custom-table :deep(.ant-table-tbody > tr > td) {
  padding: 16px 24px;
}

.custom-table :deep(.ant-table-tbody > tr:hover > td) {
  background-color: #f5f5f5;
}

.column-header {
  font-weight: 500;
  color: #262626;
}

/* 美化分页器 */
.custom-table :deep(.ant-pagination) {
  margin: 16px 0;
}

.custom-table :deep(.ant-pagination-item-active) {
  border-color: #1890ff;
  font-weight: 500;
}

.custom-table :deep(.ant-pagination-item:hover) {
  border-color: #1890ff;
}

/* 添加金额的样式 */
.custom-table :deep(.ant-table-tbody > tr > td[align="right"]) {
  font-family: "Roboto Mono", monospace;
  color: #262626;
  font-weight: 500;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-upload-list-picture) {
  margin-top: 8px;
}

.avatar-hover {
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-hover:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

:deep(.ant-modal-content) {
  border-radius: 8px;
}

:deep(.ant-modal-header) {
  border-radius: 8px 8px 0 0;
}

:deep(.ant-modal-body) {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}
</style>
